<template>
    <div>
        <!-- 页面头部导航，显示当前操作和模块名称 -->
          <!-- 二级标题，说明当前操作是修改资料 -->
            <!-- 头部图标（未配置） -->
             <!-- 主标题，标识所属功能模块 -->
        <el-page-header
            content="修改资料"          
            icon=""                    
            title="资料管理"             
        />

        <!-- 资料修改表单 -->
         <!-- 表单引用，用于触发表单验证和提交 -->
            <!-- 绑定响应式数据模型 -->
              <!-- 表单字段验证规则 -->
                <!-- 统一设置标签宽度 -->
                  <!-- 自定义表单样式类 -->
                    <!-- 字段标签 -->
                     <!-- 与验证规则和数据模型中的字段名一致 -->
        <el-form
            ref="newsFormRef"           
            :model="state.newsForm"   
            :rules="newsFormRules"      
            label-width="80px"          
            class="demo-ruleForm"       
        >
            <!-- 标题输入项 -->
            <el-form-item
                label="标题"            
                prop="title"            
            >
                <el-input v-model="state.newsForm.title" /> <!-- 输入框，双向绑定标题字段 -->
            </el-form-item>

            <!-- 内容编辑项，使用自定义富文本编辑器 -->
              <!-- 字段标签 -->
               <!-- 与验证规则和数据模型中的字段名一致 -->
            <el-form-item
                label="内容"            
                prop="content"          
            >
                <editor @event="handleChange" /> <!-- 自定义编辑器组件，监听内容变化并更新数据模型 -->
            </el-form-item>

            <!-- 类型选择项 -->
              <!-- 字段标签 -->
                <!-- 与验证规则和数据模型中的字段名一致 -->
            <el-form-item
                label="类型"            
                prop="category"        
            >
            <!-- 双向绑定类型值 -->
               <!-- 添加间距样式类 -->
                 <!-- 占位提示文本 -->
                    <!-- 下拉框宽度占满父容器 -->
                <el-select
                    v-model="state.newsForm.category"   
                    class="m-2"                      
                    placeholder="Select"              
                    style="width:100%"               
                >
                    <!-- 遍历类型选项，动态生成下拉项 -->
                     <!-- 循环渲染选项数组 -->
                        <!-- 以选项值作为唯一键值 -->
                           <!-- 选项显示文本 -->
                            <!-- 选项实际值（存储到数据库的标识） -->
                    <el-option
                        v-for="item in category_options" 
                        :key="item.value"             
                        :label="item.label"           
                        :value="item.value"             
                    />
                </el-select>
            </el-form-item>

            <!-- 提交按钮 -->
            <el-form-item style="margin-bottom: 300px;"> <!-- 底部边距，调整按钮与表单的间距 -->
                 <!-- 主按钮样式（蓝色高亮） -->
                  <!-- 点击触发表单提交函数 -->
                <el-button
                    type="primary"      
                    @click="submitForm()" 
                >编辑资料</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
// 引入Vue组合式API核心函数
import { ref, reactive, onMounted } from "vue";
// 引入自定义富文本编辑器组件
import editor from "@/components/editor/Editor";
// 引入路由相关钩子（获取当前路由参数）
import { useRouter, useRoute } from "vue-router";
// 引入Vuex状态管理钩子（获取当前用户信息）
import { useStore } from "vuex";
// 引入HTTP请求库
import axios from "axios";

// 获取当前路由参数（用于获取要修改的资料ID）
const route = useRoute();
// 获取Vuex存储实例（用于获取当前用户ID）
const store = useStore();
// 获取路由实例（用于页面跳转）
const router = useRouter();
// 表单引用，用于后续触发表单验证
const newsFormRef = ref();

// 响应式数据模型，包含要修改的资料信息
let state = reactive({
    newsForm: {
        id: "",                // 资料ID（通过路由参数获取，必填）
        title: "",             // 资料标题（必填）
        content: "",           // 资料内容（必填，通过富文本编辑器输入）
        category: "employ",     // 资料类型（默认值，需与后端枚举一致）
        author: store.state.userInfo.id // 作者ID（自动填充当前用户ID，不可修改）
    }
});

// 生命周期钩子：组件挂载后加载要修改的资料数据
onMounted(async () => {
    // 从路由参数中获取资料ID
    const materialId = route.params.id;
    // 调用后端接口获取资料详情
    const form = await axios.get(`/material/findById?id=${materialId}`);
    // 将获取到的资料数据填充到表单数据模型中
    state.newsForm = form.data.data;
});

表单验证规则
const newsFormRules = reactive({
    title: [{ 
        required: true,         // 字段必填
        message: "请输入标题",   // 验证失败提示信息
        trigger: "blur"          // 验证触发时机：失去焦点时
    }],
    content: [{ 
        required: true, 
        message: "请输入内容", 
        trigger: "blur" 
    }],
    category: [{ 
        required: true, 
        message: "请选择资料类型", 
        trigger: "blur" 
    }]
});

// 富文本编辑器内容变化时的回调函数
const handleChange = (data) => {
    state.newsForm.content = data; // 将编辑器内容同步到数据模型中的content字段
};

// 资料类型选项配置（可根据业务需求扩展或从后端动态获取）
const category_options = [
    { label: "就业", value: 1 },    // 类型1对应“就业”标签
    { label: "面试", value: 2 },    // 类型2对应“面试”标签
    { label: "简历", value: 3 }     // 类型3对应“简历”标签
];

// 表单提交处理函数
const submitForm = () => {
    // 触发表单验证
    newsFormRef.value.validate(async (valid) => {
        if (valid) { // 验证通过
            // 发送资料更新请求到后端接口
            await axios.post("/material/updateById", state.newsForm);
            // 跳转到资料列表页面
            router.push(`/information-manage/materialList`);
        }
    });
};
</script>

<style lang="scss" scoped>
.el-form {
    margin-top: 50px; // 表单整体顶部间距，调整页面布局
}
</style>